<template>
	<div
		class="flex items-center h-[40px] rounded-lg border border-border-1 bg-bg-3 app-bg-react text-t-2"
		:class="expanded ? ' px-[10px]' : ' px-[9px]'"
		@click="useSearchGameStore().show()">
		<base-icon class="text-[20px] flex-shrink-0" name="search"></base-icon>
		<input
			readonly
			v-if="expanded"
			type="text"
			class="ml-2 flex-1 bg-transparent outline-none text-t-2 placeholder:text-t-2"
			:placeholder="$t('action.search')" />
	</div>
</template>
<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { useSearchGameStore } from '@/store'

defineOptions({ name: 'AppSearch' })

defineProps({
	expanded: {
		type: Boolean,
		default: true
	}
})
</script>
